<template>
	<view class="img_list">
		<view class="img" v-for='(item, index) in list' :style="{width:`${width}rpx;`,height:`${height}rpx;`}">
			<video class="item" :src="item" :controls='false' object-fit='fill' ></video>
			<view class='del ' @click='delImg(index)'>
				<text class='cuIcon-close'></text>
			</view>
		</view>
		<view class="up-box" @click='addImg'>
			<slot name="upBox"></slot>
		</view>
		<view v-if="list.length < limit" class="add"  @click='addImg' :style="{width:`${width}rpx;`,height:`${height}rpx;`}">
			<image class='icon' src="/pagesPet/static/icon/video.png" mode="aspectFill"></image>
			<text>{{addText}}</text>
		</view>
	</view>
</template>

<script>
	import { imgUpload } from '@/api/common'
	export default {
		props:{
			value: String, //图片列表
			// 多图片拼接符号
			joinStr: {
				type: String,
				default: '@'
			},
			addText: {
				type: String,
				default: '点击上传'
			},
			// 最大上传数量
			limit: {
				type: Number,
				default: 5
			},
			width:{
				type: Number,
				default: 200
			},
			height:{
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				// 图片列表
				list: []
			}
		},
		watch: {
			value(val) {
				this.formatList(val)
			}
		},
		created() {
			this.formatList(this.value)
		},
		methods: {
			// 新增图片
			addImg() {
				if(this.list.length == this.limit) {
					uni.showToast({title: '超出最大上传限制', icon: 'none'})
					return;
				}
				uni.chooseVideo({
					count: 1,
					success: res => {
						console.log(res)
						this.upload(res.tempFilePath)
					}
				})
			},
			upload(file) {
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				imgUpload(file).then(res => {
					uni.hideLoading()
					let data = JSON.parse(res.data);
					this.list.push(data.url)
					this.$emit('input', this.list.join(this.joinStr))
				})
				
			},
			delImg(index){
				this.list.splice(index, 1);
				this.$emit('input', this.list.join(this.joinStr))
			},
			// 格式化图片列表
			formatList(val) {
				if(val != '') {
					this.list = val.split(this.joinStr)
				} else {
					this.list = []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

	.img_list{
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		
		
		.img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			position: relative;
			margin-right: 14rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			.item{
				width: 100%;
				height: 100%;
				border-radius: 4rpx;
			}
			.del{
				position: absolute;
				top: 0;
				right: 0;
				width: 36rpx;
				height: 36rpx;
				border-radius: 0 16rpx 0 16rpx;
				font-size: 24rpx;
				color: #fff;
				background-color: rgba(0,0,0,0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
			}
		}
		
		.add{
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #ffffff;
			font-size: 26rpx;
			color: var(--h2Color);
			border: 2rpx dashed #DDDDDD;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 5rpx;
			}
		}
	}
</style>